<template>
  <div class="container">
    <div class="slogan">
      <img src="//s.baixing.net/img/refashion/logo_baixing.png" />
      <br />
      免费，快速，搞得定
    </div>
    <div class="cartoon">
      <img
        src="//file.baixing.net/201604/7c8f28ce2aa696d9ef4bcbfa57895b78.png"
      />
    </div>
    <div class="login">
      <div class="title">
        <span class="">手机号注册</span>
      </div>
      <el-form
        :model="ruleForm"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input
            type=""
            v-model="ruleForm.phone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="button">
            <el-button type="primary" @click="go(ruleForm)">登录</el-button>
            <el-button @click="dialogVisible = true">注册</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="registform"
      >
        <el-form-item label="手机号">
          <el-input v-model="registform.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="registform.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="registered(registform)"
          >注 册</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { register } from "../../api/register";
import { login } from "../../api/login";
export default {
  data() {
    return {
      dialogVisible: false,
      labelPosition: "right",
      token: "",
      ruleForm: {
        phone: "",
        password: "",
      },
      registform: {
        phone: "",
        password: "",
      },
      // rules: {
      //   phone: [
      //     { validator: validatePass, trigger: 'blur' }
      //   ],
      //   password: [
      //     { validator: validatePass2, trigger: 'blur' }
      //   ],

      // }
    };
  },
  computed: {},
  watch: {},
  methods: {
    go(val) {
      login(val)
        .then((res) => {
          // console.log(res.data);
          if (res.status === 200) {
            //利用sessionstorage存储到本地
            sessionStorage.setItem("token",res.data.token)
            this.$store.commit('setToken',sessionStorage.getItem("token"))

            this.$router.push("/layout"); //登录验证成功路由实现跳转
            this.$message.success({ message: "登录成功", center: true });
          } else {
            this.$message.error({ message: "登录失败", center: true });
          }
        })
        .catch((err) => {
          console.log("请求错误",err);
        });
    },
    registered(registform) {
      console.log(registform);
      register(registform).then(({ data: res }) => {
        console.log(res);
      });
      this.dialogVisible = false;
    },
    //   resetForm(formName) {
    //     this.$refs[formName].resetFields();
    //   }
  },
  created() {
  },
  mounted() {},
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
.container {
  height: 100%;
  background-color: #eeeff1;
}
.login {
  width: 35%;
  height: 40%;
  background-color: #fff;
  margin: auto;
  padding-top: 15px;
  border-radius: 2px;
  border: 1px solid #ddd;
}
.slogan {
  padding-top: 90px;
  text-align: center;
  margin-bottom: 10px;
}
.slogan img {
  width: 130px;
  margin-bottom: 8px;
}
.title {
  margin-bottom: 20px;
}
.el-input {
  width: 80%;
  /* width: 350px; */
}
.button {
  padding-right: 100px;
}
.cartoon {
  position: absolute;
  top: 35px;
  left: 850px;
}
</style>